<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关于我们 - 迈浪心理</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="about.css">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
    <div id="app">
        <header class="header">
            <div class="logo">
                <svg width="160" height="40" viewBox="0 0 160 40">
                    <path d="M20 5 C15 15, 10 25, 5 35 S25 35, 30 25 S35 15, 40 5" fill="none" stroke="#4a90e2"
                        stroke-width="2" />
                    <text x="45" y="28" font-family="Microsoft YaHei" font-size="24" fill="#333">迈浪心理</text>
                </svg>
            </div>
            <nav class="nav">
                <a href="index.html" class="nav-item" @click="goToPage('index')">网站首页</a>
                <a href="consultation.html" class="nav-item" @click="goToPage('consultation')">心理咨询</a>
                <a href="therapist.html" class="nav-item" @click="goToPage('therapist')">心理咨询师</a>
                <a href="about.html" class="nav-item active" @click="goToPage('about')">关于我们</a>
                <a href="user-center.html" class="nav-item" @click="goToPage('user-center')">个人中心</a>
                <a href="#" class="nav-item login-btn">登录</a>
            </nav>
        </header>

        <main class="about-main">
            <div class="page-header">
                <h1>关于迈浪心理</h1>
                <p>专业、温暖、守护每一位来访者的心理健康</p>
            </div>

            <section class="about-intro">
                <div class="container">
                    <div class="intro-content">
                        <div class="intro-text">
                            <h2>我们的使命</h2>
                            <p>迈浪心理致力于为个人和企业提供专业的心理健康服务。我们相信每个人都值得拥有健康的心理状态和美好的生活。</p>
                            <p>我们的团队由经验丰富的心理咨询师组成，他们不仅拥有专业的资质，更怀着真诚的心为每一位来访者提供帮助。</p>
                        </div>
                        <div class="intro-image">
                            <img src="https://images.pexels.com/photos/3760263/pexels-photo-3760263.jpeg" alt="关于我们">
                        </div>
                    </div>
                </div>
            </section>

            <section class="about-values">
                <div class="container">
                    <h2 class="section-title">我们的价值观</h2>
                    <div class="values-grid">
                        <div class="value-card">
                            <div class="value-icon">🎯</div>
                            <h3>专业导向</h3>
                            <p>坚持专业标准，提供科学有效的心理服务</p>
                        </div>
                        <div class="value-card">
                            <div class="value-icon">🤝</div>
                            <h3>真诚关怀</h3>
                            <p>以真诚的心对待每一位来访者</p>
                        </div>
                        <div class="value-card">
                            <div class="value-icon">🔒</div>
                            <h3>隐私保护</h3>
                            <p>严格保护来访者的个人隐私</p>
                        </div>
                        <div class="value-card">
                            <div class="value-icon">💡</div>
                            <h3>持续创新</h3>
                            <p>不断提升服务质量和咨询体验</p>
                        </div>
                    </div>
                </div>
            </section>

            <section class="about-team">
                <div class="container">
                    <div class="team-content">
                        <h2>制作团队</h2>
                        <div class="team-members">
                            <div class="member-item">
                                <div class="member-icon">👨‍💻</div>
                                <div class="member-info">
                                    <h3>吴智鹏</h3>
                                    <p>前后端开发</p>
                                </div>
                            </div>
                            <div class="member-item">
                                <div class="member-icon">👩‍💻</div>
                                <div class="member-info">
                                    <h3>尹燕敏</h3>
                                    <p>前端UI设计、数据库设计</p>
                                </div>
                            </div>
                            <div class="member-item">
                                <div class="member-icon">👩‍💻</div>
                                <div class="member-info">
                                    <h3>曹婉琪</h3>
                                    <p>前端页面设计、产品分析</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section class="about-contact">
                <div class="container">
                    <div class="contact-content">
                        <h2>联系我们</h2>
                        <div class="contact-info">
                            <div class="info-item">
                                <span class="info-icon">📞</span>
                                <div class="info-text">
                                    <h3>咨询电话</h3>
                                    <p>400-123-4567</p>
                                </div>
                            </div>
                            <div class="info-item">
                                <span class="info-icon">📧</span>
                                <div class="info-text">
                                    <h3>电子邮箱</h3>
                                    <p>contact@mailong.com</p>
                                </div>
                            </div>
                            <div class="info-item">
                                <span class="info-icon">📍</span>
                                <div class="info-text">
                                    <h3>咨询地址</h3>
                                    <p>北京市昌平区华北电力大学</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </main>
    </div>
</body>

</html>